<template>
  <scroll-view scroll-y class="my">
    <div class="header" :class="'fs' + fs">
      <div class="setting" @tap="toSetting"><i class="iconfont icon-shezhi1"></i></div>
      <div class="user-info">
        <open-data class="user-img" type="userAvatarUrl"></open-data>
        <open-data type="userNickName"></open-data>
        <view class="login-btn" v-if="!token" @tap="toAuth">请登录</view>
      </div>
      <div class="message" @tap="toAuth"><i class="iconfont icon-gerenxinxi"></i></div>
    </div>

    <div class="nav-bar" :class="'fs' + fs">
      <block v-for="(item, index) of navItem" :key="index">
        <div class="nav-item">
          <div class="count">{{item.count}}</div>
          <div class="title">{{item.title}}</div>
        </div>
      </block>
    </div>
    
    <div class="my-order" :class="'fs' + fs">
      <div class="order-title">我的订单</div>
      <div class="order-bar">
        <block v-for="(item, index) of orderItem" :key="index">
          <div class="order-item" @tap="toOrder(item.id)">
            <i class="iconfont" :class="item.icon"></i>
            <div class="order-desc">{{item.desc}}</div>
          </div>
        </block>
      </div>
    </div>

    <div class="addr-edit" :class="'fs' + fs" @tap="handleAddr">
      <div class="text">收货地址管理</div>
      <i class="iconfont icon-xiangyou"></i>
    </div>

    <div class="contact" :class="'fs' + fs">
      <div class="kefu item">
        <div class="title">联系客服</div>
        <div class="tel">400-618-4000</div>
        <button
          class="contact-btn"
          open-type="contact"
          @contact="contact"
          >
          客服
        </button>
      </div>
      <div class="feedback item">
        <div class="title">意见反馈</div>
        <i class="iconfont icon-xiangyou"></i>
        <button
          class="contact-btn"
          open-type="feedback"
          @contact="feedback"
          >
          反馈
        </button>
      </div>
    </div>

    <div class="addr-edit" :class="'fs' + fs" @tap="toCanvas">
      <div class="text">canvas使用</div>
      <i class="iconfont icon-xiangyou"></i>
    </div>
    <div class="addr-edit" :class="'fs' + fs" @tap="toBluetoothDemo">
      <div class="text">蓝牙demo</div>
      <i class="iconfont icon-xiangyou"></i>
    </div>

    <navigator
      :class="'fs' + fs"
      class="addr-edit"
      url="/pages/customnav/main"
      open-type="navigate"
      hover-class="none">
      自定义导航栏
    </navigator>
    <navigator
      :class="'fs' + fs"
      class="addr-edit"
      url="/pages/weather/main"
      open-type="navigate"
      hover-class="none">
      单标签天气图标
    </navigator>

    <navigator
      :class="'fs' + fs"
      class="addr-edit"
      url="/pages/fs/main"
      open-type="navigate"
      hover-class="none">
      修改字体
    </navigator>

    <navigator
      :class="'fs' + fs"
      class="addr-edit"
      url="/pages/calendar/main"
      open-type="navigate"
      hover-class="none">
      日历
    </navigator>

    <navigator
      :class="'fs' + fs"
      class="addr-edit"
      url="/pages/im/main"
      open-type="navigate"
      hover-class="none">
      im
    </navigator>

  </scroll-view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  computed: {
    ...mapState([
      'fs'
    ])
  },
  data () {
    return {
      navItem: [
        { count: 0, title: '收藏的店铺' },
        { count: 0, title: '收藏的商品' },
        { count: 0, title: '关注的商品' },
        { count: 0, title: '我的足迹' },
      ],
      orderItem: [
        { icon: 'icon-daifukuan1', desc: '待付款', id: 1 },
        { icon: 'icon-daifahuo', desc: '待收货', id: 2 },
        { icon: 'icon-qianbi', desc: '退款/退货', id: 3 },
        { icon: 'icon-dingdanwancheng', desc: '全部订单', id: 0 },
      ],
      token: ''
    }
  },
  onShow () {
    this.token = wx.getStorageSync('token') || '';
    console.log(this.$store.state.fs)
  },
  methods: {
    // ...mapMutations([
    //   'fsChange'
    // ]),
    toBluetoothDemo () {
      wx.navigateTo({ url: '/pages/bluetoothdemo/main' })
    },
    // 蓝牙能力
    toCanvas () {
      wx.navigateTo({ url: '/pages/canvas/main' })
    },
    // 去订单页
    toOrder (id) {
      wx.navigateTo({ url: '/pages/order/main?id=' + id })
    },
    // 去授权页
    toAuth () {
      wx.navigateTo({ url: '/pages/auth/main' })
    },
    // 管理收货地址
    handleAddr () {
      // 调用微信小程序自带的收货地址功能
      wx.chooseAddress({
        success: res => {
          let { userName,provinceName,cityName,countyName,detailInfo,telNumber } = res;
          // 拼接收获地址
          this.addrInfo = {
            userName,
            telNumber,
            addressInfo:`${provinceName}${cityName}${countyName}${detailInfo}`
          }
          // 把数据存储到本地
          wx.setStorageSync('addr-info',this.addrInfo);
        }
      });
    },
    // 打开设置
    toSetting () {
      wx.openSetting({
        success(res) {
          console.log(res.authSetting)
          // res.authSetting = {
          //   "scope.userInfo": true,
          //   "scope.userLocation": true
          // }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$mainColor:#ff2d49;
.my {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #f4f4f4;
}
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500rpx;
  color: #fff;
  background: linear-gradient(180deg, $mainColor, rgb(248, 107, 41));
  // font-size: 28rpx;
  .iconfont {
    font-size: 40rpx;
  }
  .user-info {
    padding: 10rpx 80rpx;
    text-align: center;
    .user-img {
      margin-bottom: 10rpx;
      display: block;
      width: 200rpx;
      height: 200rpx;
      border-radius: 50%;
      border: 7rpx solid #fff;
      overflow: hidden;
    }
    .login-btn {
      height: 50rpx;
      line-height: 50rpx;
      border: 1rpx solid #fff;
      border-radius: 10rpx;
    }
  }
}

.nav-bar {
  position: relative;
  top: -20rpx;
  // left: 20rpx;
  // right: 20rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100rpx;
  margin: 0 20rpx;
  padding: 10rpx 0;
  color: #888;
  background-color: #fff;
  // font-size: 26rpx;
  .nav-item {
    text-align: center;
  }
}

.my-order {
  color: #666;
  background-color: #fff;
  // font-size: 28rpx;
  margin: 0 20rpx;
  .order-title {
    padding: 20rpx;
    border-bottom: 1rpx solid #eee;
  }
  .order-bar {
    display: flex;
    justify-content: space-around;
    .order-item {
      padding: 20rpx 0;
      text-align: center;
      .iconfont {
        color: $mainColor;
        font-size: 40rpx;
      }
    }
  }
}

.addr-edit {
  display: flex;
  justify-content: space-between;
  margin: 20rpx 20rpx 0;
  padding: 20rpx;
  color: #666;
  background-color: #fff;
  // font-size: 28rpx;
  .iconfont {
    font-size: 30rpx;
  }
}

.contact {
  margin: 20rpx 20rpx 0;
  color: #666;
  background-color: #fff;
  // font-size: 28rpx;
  .iconfont {
    font-size: 30rpx;
  }
  .item {
    display: flex;
    justify-content: space-between;
    padding: 20rpx;
    border-bottom: 1rpx solid #eee;
  }
  .item {
    position: relative;
    .contact-btn {
      position: absolute;
      width: 95%;
      height: 60rpx;
      line-height: 60rpx;
      // font-size: 26rpx;
      margin: 0 auto;
      opacity: 0;
    }
  }
}
</style>
